<template>
    <div>
        <div class="alltitle">
            <div class="title-box">今日预警类型统计</div>
        </div>
        <div class="box1">
            <div class="person-zhanbi ">
                <div style="height: 277px;width: 100%;display: inline-block" id="fb2">

                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

let myEcharts = echarts;

onMounted(() => {
    initChart();
});

onUnmounted(() => {
    myEcharts.dispose;
})

function initChart() {
    let chart = myEcharts.init(document.getElementById("fb2"));

    let option = {
        xAxis: {
            data: [ 0, 1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        legend: {
            data: ['噪声', '烟雾', '雷达', '声音'],
            textStyle: {
                fontSize: 14,//字体大小
                color: '#ffffff'//字体颜色
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        series: [
            {
                name: '声音',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                type: 'line',
                stack: 'x',
                itemStyle: {
                    color: '#00d9dd'
                }
            },
            {
                name: '烟雾',
                data:  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                type: 'line',
                stack: 'x',
                itemStyle: {
                    color: '#bb3852'
                }
            },
            {
                name: '雷达',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                type: 'line',
                stack: 'x',
                itemStyle: {
                    color: '#98da44'
                }
            },
            {
                name: '语音',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                type: 'line',
                stack: 'x',
                itemStyle: {
                    color: '#cf6d42'
                }
            },
        ]
    };

    chart.setOption(option)
    window.onresize = function () {
        chart.resize();
    };
}


// return { initChart };
</script>
<style scoped>
.jryj {
    background: url(../../static/jryj.png) no-repeat;
    background-size: 100% auto;
}

.wcl {

    background: url(../../static/wcl.png) no-repeat;
    background-size: 100% auto;
}
</style>